<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
        }

        tr,td{
            border: 1px #000 solid;
            font-size: 20px;
            padding: 10px;
            text-align: center;
        }
        caption{
            font-size: 30px;
            font-weight: bold;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

    
    
    <%if(stus && stus.length > 0){%>

    <table>
        <caption>学生列表</caption>
        <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            
        </thead>

        <tbody>

            <% for(const stu of stus){%>          
                <tr>
                    <td><%= stu.id%></td>
                    <td><%= stu.name%></td>
                    <td><%= stu.age%></td>
                    <td><%= stu.gender%></td>
                    <td><%= stu.address%></td>
                    <td>
                        <a 
                        onclick="return confirm('确认删除吗')
                        " href="/delstu?id=<%= stu.id%>">删除
                        </a>
                        <a href="/revise?id=<%= stu.id%>">修改</a> 
                    </td>
                </tr>
            <%}%>
        </tbody>
    </table>
    <%}else{%>
        <p>学生列表为空</p>
    <%}%>

    <br>
    <hr>

    <form action="/students/addstu" method="post">
        <div>
            姓名：<input type="text" name="name" >
        </div>
        <div>
            年龄：<input type="number" max = "150" min = "0" name="age">
        </div>
        <div>
            性别：<input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </div>
        <div>
            地址：<input type="text" name="address">
        </div>
        <div>
            <button>提交</button>
        </div>
        
    </form>
    
</body>
</html>